<html>
<head>
    <meta charset="UTF-8">
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th, td
        {
            border: 1px solid black;
        }
        #countDown {
            margin-bottom: 10px;;
        }
    </style>

</head>
<body>
<center>
    <h3>支付页面</h3>
    <h4 id="price"></h4>
    <div id="countDown"></div>
    <button id="payOrder">付款</button>
</center>
<script src="js/libs/jquery.js"></script>
<script>
    let order = localStorage.getItem("currentOrder");
    order = JSON.parse(order);
    $("#price").text('金额: ¥' + order.amount);

    $("#payOrder").click((e) => {
        e.preventDefault();

        console.log(order);
       $.get(`/order/pay?orderId=${order.id}`, (data,status) => {
            console.log(data, typeof(data));

            if (data) {
                window.location.href = '/success.html';
            } else {
                alert('支付失败！');
                window.location.href = '/overdue.html';
            }
       });
    });

    let countDown = 10;

    function payCountDown() {
        $('#countDown').text(`支付时间还剩${countDown}秒`);
        if (countDown > 0) {
            setTimeout(() => {
                --countDown;
                payCountDown();
            }, 1000);
        } else {
            setTimeout(() => {
                window.location.href = '/overdue.html';
            }, 1000);
        }
    }

    payCountDown();

</script>
</body>
</html>